import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { rules } from '/@/utils/helper/validator';
import { render } from '/@/utils/common/renderUtils';
import { defineComponent, h } from 'vue';
import { InputNumber } from "ant-design-vue";

//列表数据
export const columns: BasicColumn[] = [
  {
    title: '分类',
    align: "center",
    dataIndex: 'category_dictText'
  },
  {
    title: '名称',
    align: "center",
    dataIndex: 'name'
  },
  {
    title: '图片',
    dataIndex: 'picList',
    width: 120,
    slots: { customRender: 'img' },
  },
  {
    title: '特点',
    align: "center",
    dataIndex: 'memo'
  },
  // {
  //   title: '占比',
  //   align: "center",
  //   slots: { customRender: 'proportion' },
  // },
  {
    title: '周期时间',
    align: "center",
    dataIndex: 'planTime',
    customRender: ({ record }) => {
      return record.startMonth + ' 至 ' + record.endMonth
    },
  },
];
//查询数据
export const searchFormSchema: FormSchema[] = [
  {
    label: "名称",
    field: 'name',
    component: 'Input',
    colProps: { span: 6 },
  },
  {
    label: '种类',
    field: 'category',
    colProps: { span: 6 },
    component: 'JTreeSelect',
    componentProps: {
      dict: "t_classification,name,id",
      pidField: "pid",
      pidValue: "1690901276535795713",
      hasChildField: "has_child",
      placeholder: '请选择种类',
    },
  },
];
//表单数据
export const formSchema: FormSchema[] = [
  {
    label: '名称',
    field: 'name',
    component: 'Input',
    dynamicRules: ({ model, schema }) => {
      return [
        { required: true, message: '请输入名称!' },
      ];
    },
  },
  {
    label: '周期',
    field: 'planTime',
    component: 'RangePicker',
    componentProps: {
      style: {
        width: '100%'
      },
      showTime: false,
      valueFormat: 'YYYY-MM-DD',
      getPopupContainer: (node) => document.body
    },
  },
  // {
  //   label: '占比',
  //   field: 'proportion',
  //   component: 'Input',
  //   render: ({ model, field }) => {
  //     return h('div', { style: { display: 'flex', alignItems: 'center' } }, [
  //       h(InputNumber, {
  //         placeholder: '请输入占比',
  //         min: 0.01,
  //         max: 1,
  //         step: 0.1,
  //         value: model[field],
  //         onChange: (e: ChangeEvent) => {
  //           model[field] = e;
  //         },
  //       }),
  //       h('span', { style: { marginLeft: '10px' } }, `${(model.hasOwnProperty(field) ? (model[field] * 100) : 0).toFixed(2)}%`)
  //     ]);
  //   },
  //   dynamicRules: ({ model, schema }) => {
  //     return [
  //       { required: true, message: '请输入生命周期在作物整段时间的占比!' },
  //     ];
  //   },
  // },
  {
    label: '图片',
    field: 'pic',
    component: 'JImageUpload',
    componentProps: {
      fileMax: 6,
    },
  },
  {
    label: '特点',
    field: 'memo',
    component: 'InputTextArea',
  },
  {
    label: '种类',
    field: 'category',
    component: 'JTreeSelect',
    componentProps: {
      dict: "t_classification,name,id",
      pidField: "pid",
      pidValue: "1690901276535795713",
      hasChildField: "has_child",
      placeholder: '请选择种类',
      getPopupContainer: (node) => document.body
    },
    dynamicRules: ({ model, schema }) => {
      return [
        { required: true, message: '请选择种类!' },
      ];
    },
  },
  // TODO 主键隐藏字段，目前写死为ID
  {
    label: '',
    field: 'id',
    component: 'Input',
    show: false
  },
];



/**
* 流程表单调用这个方法获取formSchema
* @param param
*/
export function getBpmFormSchema(_formData): FormSchema[] {
  // 默认和原始表单保持一致 如果流程中配置了权限数据，这里需要单独处理formSchema
  return formSchema;
}
